<template>
  <div class="page-container">
    <div class="body-container">
      <div class="hottype-container">
        <div class="title">
          热门分类
        </div>
        <div class="type-container">
          <div
            v-for="(item, index) of typeList"
            :key="index"
            class="content-container"
            @mouseenter="hoverShowSahde"
            @mouseleave="hoverHideSahde"
            @click="targetType(item.id)"
          >
            <div class="head">
              <img v-lazy="item.typeimg" class="head-img" />
            </div>
            <div class="title">
              {{ item.typename }}
            </div>
            <div class="content">
              <span class="text">
                {{ item.intro }}
              </span>
              <div class="date">{{ item.createdAt | formtTime }}</div>
            </div>
          </div>
        </div>

        <div class="more" @click="targetType">
          更多分类
        </div>
      </div>
      <div class="br-line"></div>
      <div class="newessay-container">
        <div class="essay-title">最新文章</div>
        <div
          ref="list"
          v-for="(item, index) of essayList"
          :key="index"
          class="essay-list animate__animated animate__bounceInUp"
        >
          <div class="content-text">
            <div class="titleWrapper">
              <h1 @click="targetEssay(item.id)">
                {{ item.title }}
              </h1>
            </div>
            <div class="introWrapper">{{ item.intro }}</div>
            <div class="infoWrapper">
              <div class="type-icon">
                <i class="iconfont iconleixing"></i>
                <span>{{ item.type.typename }}</span>
              </div>
              <div class="date-icon">
                <i class="iconfont iconshijian"></i>
                <span>{{ item.createdAt | formtTime }}</span>
              </div>
              <div class="target-icon" @click="targetEssay(item.id)">
                <i class="iconfont iconhuaban1"></i>
                <span>查看详情</span>
              </div>
            </div>
          </div>
          <div class="content-img">
            <img v-lazy="item.type.typeimg" />
          </div>
        </div>
      </div>
      <div class="load-more" @click="loadMore" v-show="isMore"></div>
      <div class="load-more-none" v-show="isNone">--没有更多了--</div>
      <go-top :has-outline="false" :right="40"></go-top>
    </div>
  </div>
</template>

<script>
import ApiService from "@/service/index";
import { formtTime } from "@/utils/tools";
import GoTop from "@inotom/vue-go-top";

const api = new ApiService();
export default {
  name: "IndexView",
  components: {
    GoTop
  },
  filters: {
    formtTime
  },
  async created() {
    let list = await api.findType();
    this.typeList = list.slice(0, 3);
    this.essayList = await api.findEssay({ offset: this.offset });
  },
  data() {
    return {
      typeList: [],
      essayList: [],
      offset: 0,
      isNone: false,
      isMore: true
    };
  },
  methods: {
    hoverShowSahde(e) {
      let element = e.target || e.srcElement,
        parent = element.firstElementChild,
        inserElement = document.createElement("div");
      inserElement.style = `width: 385px;height: 239px;
            position: absolute;
            top:0;
            background-color:rgba(0, 0, 0, .4);`;
      parent.appendChild(inserElement);
      parent.firstElementChild.style = `transform:scale(1.2)`;
    },
    hoverHideSahde(e) {
      let element = e.target || e.srcElement,
        parent = element.firstElementChild,
        removeparent = element.firstElementChild.childNodes;
      parent.removeChild(removeparent[1]);
      parent.firstElementChild.style = `transform:scale(1)`;
    },
    targetType(typeid) {
      typeof typeid === "number"
        ? this.$router.push({ path: "type", query: { originid: typeid } })
        : this.$router.push({ path: "/type" });
    },
    targetEssay(typeid) {
      this.$router.push({ path: "essay", query: { originid: typeid } });
    },
    async loadMore() {
      this.offset += 5;
      let list = await api.findEssay({ offset: this.offset });
      if (list.length <= 0) {
        this.isNone = true;
        this.isMore = false;
        return;
      }
      this.essayList.push(...list);
    }
  }
};
</script>

<style lang="scss" scoped>
$theme: #f2db4d;
.body-container {
  width: 100%;
  height: 100%;
}
.content-container:hover {
  box-shadow: #999 0px 5px 15px !important;
}
.hottype-container {
  width: 1253px;
  height: 500px;
  margin: 0 auto;
  margin-top: 30px;
  border-bottom: 2px solid #eee;

  .more {
    padding-top: 30px;
    cursor: pointer;
    content: "";
    clear: both;
    display: block;
    width: 80px;
    height: 20px;
    margin-left: 1150px;
  }
  .more:hover {
    color: $theme;
  }
  .title {
    font-size: 20px;
    width: 100%;
    height: 25px;
    text-align: center;
  }
  .type-container {
    margin-top: 40px;
    height: 361px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    .content-container {
      width: 385px;
      height: 100%;
      box-shadow: #e5e5e5 0px 7px 10px;
      justify-content: space-between;
      position: relative;
      cursor: pointer;
      .head {
        overflow: hidden;
        img {
          width: 385px;
          height: 237px;
          transition: all 0.6s;
        }
        .sahde {
          width: 385px;
          height: 237px;
          position: absolute;
          background-color: rgba(0, 0, 0, 0.4);
        }
      }
      .title {
        position: absolute;
        top: 211px;
        text-align: left;
        padding-left: 22px;
        box-sizing: border-box;
        font-size: 16px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
    .content {
      width: 100%;
      height: 128px;
      color: #666;
      font-size: 14px;
      background-color: #fff;
      .text {
        position: absolute;
        left: 22px;
        top: 270px;
      }
      .date {
        position: absolute;
        right: 22px;
        bottom: 22px;
      }
    }
  }
}
.br-line {
  width: 900px;
  height: 2px;
  background-color: #eee;
  margin: 0 auto;
  margin-top: 24px;
}
.newessay-container {
  width: 100%;
  height: 100%;
  .essay-title {
    font-size: 20px;
    width: 100%;
    height: 25px;
    text-align: center;
    box-sizing: border-box;
    padding-top: 38px;
  }
  .essay-list {
    width: 1253px;
    height: 233px;
    margin: 0 auto;
    box-shadow: #999 0px 0px 10px;
    margin-top: 55px;
    .content-text {
      float: left;
      width: 863px;
      .titleWrapper {
        h1 {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          cursor: pointer;
        }
        padding: 30px;
      }
      .introWrapper {
        font-size: 18px;
        margin-left: 35px;
      }
      .infoWrapper {
        padding-left: 380px;
        padding-top: 35px;
        position: relative;
        .type-icon {
          float: left;
          i {
            padding-right: 5px;
          }
        }
        .date-icon {
          margin-left: 30px;
          float: left;
          i {
            padding-right: 5px;
          }
        }
        .target-icon {
          float: left;
          position: absolute;
          right: 50px;
          top: 30px;
          width: 110px;
          height: 30px;
          line-height: 30px;
          text-align: center;
          border-radius: 9px;
          background-color: $theme;
          margin-left: 30px;
          color: #fff;
          cursor: pointer;
          i {
            padding-right: 5px;
          }
        }
      }
    }
    .content-img {
      float: left;
      width: 390px;
      height: 233px;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
.load-more {
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  margin: 0 auto;
  margin-top: 20px;
  border: 8px solid #dcdfe7;
  border-radius: 50%;
  transition: all 0.25s ease-in-out;
  cursor: pointer;
}
.load-more:hover {
  border-color: $theme;
  background-color: $theme;
  transform: scale(0.65);
}
.load-more-none {
  width: 100%;
  text-align: center;
  margin-top: 20px;
}
</style>